<div class="layui-card-body">
    <form class="layui-form" action="{:url()}" method="post" style="height: 600px;width: 800px;">
        <div class="layui-form-item">
            <label class="layui-form-label">新闻标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" value="{$info.title|default=''}" class="layui-input" autocomplete="off"
                       placeholder="不要超过32个汉字">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新闻分类</label>
            <div class="layui-input-inline">
                <select name="category_id" lay-search>
                    <volist name="site_category" id="vo" key="k">
                        <option value="{$k}"
                        <notempty name="info.category_id">
                            <eq name="$k" value="$info.category_id">selected="selected"</eq>
                        </notempty>
                        > {$vo} </option>
                    </volist>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">产品ID</label>
            <div class="layui-input-block">
                <input type="text" name="product_id" value="{$info.product_id|default=''}" class="layui-input"
                       autocomplete="off"
                       placeholder="有产品ID填写">
            </div>
        </div>

            <div class="layui-collapse" lay-accordion>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">编辑器模式</h2>
                    <div class="layui-colla-content layui-show">
                        <div id="info">
                            <p>{$info.info|raw|default=""}</p>
                        </div>
                    </div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">代码模式</h2>
                    <div class="layui-colla-content">
                        <textarea name="info" id="newinfo" style="width: 760px;height: 350px;">{$info.info|raw|default=""}</textarea>
                    </div>
                </div>
            </div>
        <input type="hidden" name="id" value="{$info.id|default=''}">
    </form>
</div>

<script type="text/javascript">
    layui.use(['element','form', 'layer', 'formSelects'], function () {
        var form = layui.form
            , formSelects = layui.formSelects
            , $ = layui.$
            ,element = layui.element
            , laydate = layui.laydate;
        element.render('collapse');
        $('#file_path').click(function () {
            window.open($('#file_path').val());
        });
        $('#img_input').on('change', function () {
            var index = layer.load(1, {time: 10 * 1000});
            var files = this.files[0];
            if (files) {
                $.ajax({
                    type: "post",
                    url: "/qiniu/gettoken",
                    async: true,
                    success: function (res) {
                        if (res.code == 0) {
                            var token = res.uptoken;

                            console.log(files);
                            var fileName = res.path + files.name;
                            var downloadurl = res.downloadurl;
                            var config = {
                                retryCount: 6,
                            };
                            var putExtra = {
                                fname: "",
                                params: {},
                                mimeType: null
                            };
                            var observable = qiniu.upload(files, fileName, token, putExtra, config);
                            var subscription = observable.subscribe(
                                {
                                    next(res) {
                                        console.log(res)
                                    },
                                    error(res) {
                                        console.log(res)
                                    },
                                    complete(res) {
                                        layer.close(index);
                                        $("#file_path").val(downloadurl + '?file=' + res.key)
                                    }
                                }
                            );

                        } else {
                            console.log(res.msg)
                        }

                    }
                });
            }

        });

        var E = window.wangEditor
        var editor = new E('#info')
        // 或者 var editor = new E( document.getElementById('editor') )
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
            'image',  // 插入图片
            'table',  // 表格

            'undo',  // 撤销
            'redo'  // 重复
        ]
        editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024
        editor.customConfig.uploadImgTimeout = 30000
        editor.customConfig.uploadFileName = 'file'
        editor.customConfig.zIndex = 100;
        editor.customConfig.debug = true;
        editor.customConfig.onchange = function (html) {
            $('#newinfo').html(html)
        }
        editor.customConfig.customUploadImg = function (files, insert) {
            var index = layer.load(1, {time: 10 * 1000});
            $.ajax({
                type: "post",
                url: "/qiniu/gettoken",
                async: true,
                success: function (res) {
                    if (res.code == 0) {
                        var token = res.uptoken;
                        var fileName = res.path + files[0].name;
                        var downloadurl = res.downloadurl;
                        var config = {
                            retryCount: 6,
                        };
                        var putExtra = {
                            fname: "",
                            params: {},
                            mimeType: null
                        };
                        var observable = qiniu.upload(files[0], fileName, token, putExtra, config);
                        var subscription = observable.subscribe(
                            {
                                next(res) {
                                    console.log(res)
                                },
                                error(res) {
                                    console.log(res)
                                },
                                complete(res) {
                                    layer.close(index);
                                    insert(downloadurl + '?file=' + res.key)
                                }
                            }
                        );
                    } else {
                        console.log(res.msg)
                    }

                }
            });
        }
        editor.create()

    });

</script>






